<template>
  <el-dialog v-if="dialog" title="企业标签" custom-class="out-dialog" :close-on-click-modal="false" append-to-body :visible.sync="dialog">
    <div class="card-list">
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="标签组名称：">
                <el-input v-model="searchParams.groupName" style="width: 240px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList" />
            </el-col>
          </el-row>

        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-table
          ref="refList"
          text-algin="center"
          border
          stripe
          resizable
          highlight-hover-row
          :data="list"
          :auto-resize="true"
          :height="380"
        >
          <vxe-table-column field="groupName" width="120" title="标签组名" />
          <vxe-table-column field="tagsNameList" title="标签" min-width="220">
            <template slot-scope="scope">
              <span>
                <el-tag v-for="(tag, index) in scope.row.tagsList" :key="index" :type="tag.checked === 0?'info':''" :hit="tag.checked === 0?false:true" effect="plain" style="margin-left:5px;margin-bottom: 5px;cursor: pointer;" @click="selectTag(tag)">{{ tag.tagsName }}</el-tag>
              </span>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList"
        />
      </el-card>
    </div>
    <div class="footer-container">
      <div slot="footer" class="dialog-footer" style="justify-content: right; float: right;">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getFriendsTagsPageList } from '@/api/cop/friends'
import SearchButton from '@/components/SearchButton'

export default {
  components: {
    SearchButton
  },
  props: {
    chooseList: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkList: [],
      checked: false,
      checkedNum: 0,
      active: 1,
      dialog: false,
      searchParams: {
        groupName: ''
      },
      pageNum: 1,
      pageSize: 20,
      total: 1,
      list: [],
      selectList: []
    }
  },
  watch: {
    dialog(val) {
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    selectTag(tag) {
      if (tag.checked === 0) {
        tag.checked = 1
        this.checkList.push(tag)
      } else {
        tag.checked = 0
        let i = -1
        this.checkList = JSON.parse(JSON.stringify(this.checkList))
        this.checkList.foreach((item, index) => {
          alert(index)
          if (item.id === tag.id) {
            i = index
          }
        })
        this.checkList.splice(i, 1)
      }
    },
    refreshParams(params) {
      this.searchParams = params
      this.getList()
    },
    addUrl(url, name = '') {
      this.addParams.sources.push({
        name: name,
        path: url,
        contentType: url.split('.')[1]
      })
      this.$refs.addForm.clearValidate('sources')
    },
    getList1() {
      this.getList()
    },
    getList() {
      getFriendsTagsPageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      }).then(res => {
        this.total = res.total
        this.list = res.records
      })
    },
    clickSure() {
      if (!this.checkList) {
        this.$message.error('请选择至少一条记录')
        return false
      }

      this.$emit('getSelectedRecords', this.checkList)
      this.dialog = false
    }
  }
}
</script>

<style lang="scss">
.card-list {
  width: 100%;
}
.out-dialog {
  width: 900px;
}
.footer-container{
   >div{
      display: inline-flex;
     &:first-child{
         padding: 10px;
         cursor: pointer;
         margin-left: 10px;
         font-size: 10px;
         &::before{
           font-size: 40px;
           justify-content: center;
           color: #fff;
         }
       }
       &:last-child{
         cursor: pointer;
         justify-content: right;
         float: right;
         font-size: 14px;
       }
   }
}
</style>
